<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
	
		// 编程范式(从编码的方式来区分): 命令式编程/声明式编程
		// 编程范式(从编写的思想来区分): 面向对象编程/函数式编程
					// 区分方式 第一公民:对象/函数  
		const nums = [10,20,111,222,444,40,50];			
		// 1.需求:取出所有小于100的数字
			let newNums = [];
			for(let n of nums){
				if(n<100) newNums.push(n);
			}
			console.log(newNums);
		//2.需求:将所有小于100的数进行转化:全部*2
			let new2Nums = []
			for(let n of newNums){
				new2Nums.push(n*2);
			}
			console.log(new2Nums);
		//3.需求:将所有new2Nums的数字相加,得到最终结果
			let new3Nums = 0
			for(let n of new2Nums){
				new3Nums += n;
			}
			console.log(new3Nums);
			
			
		// 运用高阶函数实现上述需求
		const num2s = [10,20,111,222,444,40,50];
		// 需求1:
		// filter回调函数,有几个元素就回调几次,回调函数的参数是数组元素
		//filter中的回调函数有一个要求:必须返回一个boolean值
		//true:当返回true时,函数内部会自动将这次回调n加入数组中
		//false:返回false会自动过来
		//例子:返回num2s全部的值给new1fun
		// let new1fun = num2s.filter(function(n){
		// 	return true;
		// })
		let new1fun = num2s.filter(function(n){
			return n < 100;
		})
		console.log(new1fun);
		// 需求2:
		// map函数中的回调函数返回的值为新数组的元素
		let new2fun = new1fun.map(function(n){
			return n*2;
		})
		console.log(new2fun);
		// 需求3:
		// reduce函数的回调函数对所有函数进行汇总,有两个参数,回调函数和初始值(一般为0),其中的回调函数有两个参数一个是上次的回调的结果,还有一个是这次数组的元素
		let new3fun = new2fun.reduce(function(prev,n){
			return prev+n;
		},0)
		console.log(new3fun);
		
		
		
		// 上面是分步写法,下一步是编程式的链式操作
		let total = nums.filter(function(n){
			return n<100
		}).map(function(n){
			return n*2
		}).reduce(function(prev,n){
			return prev+n;
		},0)
		console.log(total);
		
		// 链式操作的箭头函数写法
		let total2 = nums.filter((n)=>n<100).map(n=>n*2).reduce((pre,n)=>pre+n,0);
		console.log(total2);
	</script>
</html>
